<template>
    <tm-cell-group class="cell-group">
        <tm-cell-item v-for="(item, index) in componentList" :key="index" icon :label="item"></tm-cell-item>
    </tm-cell-group>
</template>

<script>
import { reactive, toRefs } from 'vue'
import TmCellGroup from '@tomatoUi/components/cell/group.vue'
import TmCellItem from '@tomatoUi/components/cell/item.vue'

export default {
    name: 'component-index',
    components: {
        TmCellGroup,
        TmCellItem,
    },
    setup() {
        const state = reactive({
            componentList: [
                'ActionSheet',
                'Button',
                'Cell',
                'Dialog',
                'Drawer',
                'Form',
                'Input',
                'Loading',
                'Modal',
                'Notify',
                'Overlay',
                'SearchBar',
                'Stepper',
                'Sticky',
                'Switch',
                'TabBar',
                'Toast',
            ],
        })

        return {
            ...toRefs(state),
        }
    },
}
</script>

<style lang="scss" scoped>
.cell-group {
    margin-top: 10px;
}
</style>
